<script setup lang="ts">
import { updateAvatarAPI, updateUserInfoAPI } from '@/api'
import { useAreaData, useUserInfo } from '@/composable'
import type { H5AreaData } from '@/types'
import type { AreaItem } from '@/types/user'
import { areaList } from '@vant/area-data'
import b64toBlob from 'b64-to-blob'
import type { ActionSheetAction } from 'vant'
import { onMounted, ref } from 'vue'

const showSheet = ref(false)
const showSelectBirthday = ref(false) // 显示选择生日
const showSelectProfesstion = ref(false) // 显示选择职业
const showSelectCity = ref(false) //显示地区
const actions = [{ name: '拍照' }, { name: '相册' }]
const minDate = new Date('1980-01-01')
const maxDate = new Date('2010-01-01')
const { cityData } = useAreaData() //从自定义hook获取地区列表
const { userInfo } = useUserInfo() //从自定义hook获取用户信息
// 职业的数据
const columns = [
  { text: '软件工程师', value: '软件工程师' },
  { text: '医生', value: '医生' },
  { text: '教师', value: '教师' },
  { text: '律师', value: '律师' },
  { text: '会计师', value: '会计师' },
  { text: '销售经理', value: '销售经理' },
  { text: '市场营销专员', value: '市场营销专员' },
  { text: '建筑师', value: '建筑师' },
  { text: '护士', value: '护士' },
  { text: '机械工程师', value: '机械工程师' },
]
//选择照片
const selectPhoto = async (action: ActionSheetAction, index: number) => {
  if (index === 0 || index === 1) {
    const avatar = await window.hdm.openGallery()
    userInfo.value.avatar = `data:image/png;base64,${avatar}`
  }
}
//选择生日回显
const confirmBirthday = (event: { selectedValues: string[] }) => {
  userInfo.value.birthday = event.selectedValues.join('-')
  showSelectBirthday.value = false
}
//选择地区回显
const confirmCity = (event: { selectedValues: string[]; selectedOptions: AreaItem[] }) => {
  userInfo.value.provinceCode = event.selectedValues[0] //省编码
  userInfo.value.cityCode = event.selectedValues[1] //市编码
  userInfo.value.countyCode = event.selectedValues[2] //区编码
  userInfo.value.fullLocation = `${event.selectedOptions[0].text} ${event.selectedOptions[1].text} ${event.selectedOptions[2].text}`
  showSelectCity.value = false
}
//选择职业回显
const confirmProfesstion = (event: { selectedValues: string[] }) => {
  userInfo.value.profession = event.selectedValues[0]
  showSelectProfesstion.value = false
}
//保存按钮
const saveBtn = async () => {
  const key = await window.hdm.showLoading()
  if (
    !userInfo.value.avatar.startsWith('http://') &&
    !userInfo.value.avatar.startsWith('https://')
  ) {
    const data = new FormData()
    const Base64 = userInfo.value.avatar.replace('data:image/png;base64,', '') //得到纯净的base64
    const blob = b64toBlob(Base64, 'image/png')
    data.append('file', blob, Date.now() + '.png') //往data中追加数据
    await updateAvatarAPI(data)
  }
  await updateUserInfoAPI(userInfo.value)
  window.hdm.showMessage('更新成功')
  window.hdm.closeLoading(key)
}
</script>

<template>
  <div class="profile-edit-page">
    <!-- 头像部分 -->
    <div class="avatar">
      <van-image
        round
        width="100"
        height="100"
        class="avatar-img"
        :src="
          userInfo.avatar ||
          'https://foruda.gitee.com/avatar/1716533299289369832/5539886_yjh8866_1716533299.png'
        "
      >
      </van-image>
      <div class="avatar-btn" @click="showSheet = true">
        <span>修改头像</span>
      </div>
    </div>

    <!-- 中间表单部分 -->
    <van-cell-group>
      <van-field label="账号" readonly v-model:="userInfo.account"></van-field>
      <van-field label="昵称" placeholder="请输入昵称" v-model:="userInfo.nickname"></van-field>
      <van-cell title="性别" class="gender">
        <van-radio-group :icon-size="16" v-model:="userInfo.gender">
          <van-radio name="男">男</van-radio>
          <van-radio name="女">女</van-radio>
        </van-radio-group>
      </van-cell>
      <van-field
        label="生日"
        readonly
        placeholder="请选择日期"
        @click="showSelectBirthday = true"
        v-model:="userInfo.birthday"
      ></van-field>
      <van-field
        label="所在地"
        readonly
        placeholder="请选择所在地"
        @click="showSelectCity = true"
        v-model:="userInfo.fullLocation"
      ></van-field>
      <van-field
        label="职业"
        readonly
        placeholder="请选择职业"
        @click="showSelectProfesstion = true"
        v-model:="userInfo.profession"
      ></van-field>
    </van-cell-group>

    <div class="submit">
      <van-button class="submit_button" round block type="primary" @click="saveBtn">
        保存资料
      </van-button>
    </div>
    <!-- 头像点击弹层 -->
    <van-action-sheet
      v-model:show="showSheet"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="selectPhoto"
    />
    <!-- 生日日期弹层 -->
    <van-popup v-model:show="showSelectBirthday" position="bottom">
      <van-date-picker
        @confirm="confirmBirthday"
        @cancel="showSelectBirthday = false"
        title="选择日期"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
    <!-- 职业弹层 -->
    <van-popup v-model:show="showSelectProfesstion" position="bottom">
      <van-picker
        :columns="columns"
        @cancel="showSelectProfesstion = false"
        @confirm="confirmProfesstion"
      ></van-picker>
    </van-popup>
    <!-- 地区弹层 -->
    <van-popup v-model:show="showSelectCity" position="bottom">
      <van-area
        title="选择地区"
        :area-list="cityData"
        @cancel="showSelectCity = false"
        @confirm="confirmCity"
      ></van-area>
    </van-popup>
  </div>
</template>

<style lang="css" scoped>
.avatar {
  padding: 30px;
  text-align: center;
  background-color: var(--mk-white);
}

.submit_button {
  background-color: var(--mk-black);
  border-color: var(--mk-black);
}

.avatar-img {
  box-shadow: 0 0 5px var(--mk-gray);
}

.avatar-btn {
  color: var(--mk-linear_end);
  margin-top: 10px;
}

/* ::v-deep 通过深度选择器修改组件库的样式 */
.gender ::v-deep(.van-cell__title) {
  width: 100px;
  flex: none;
}

.van-radio-group {
  display: flex;
  justify-content: space-between;
  height: 36px;
  width: 180px;
}

.submit {
  padding: 16px;
}
</style>
